<template>
	<view class="box">
		<u-navbar :borderBottom=false title-color="#FFFFFF" back-icon-color="#FFFFFF" title="填写单号"
			:background="background" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="" style="margin: 30rpx;">
			<!-- 物流信息开始 -->
			<view class="flex-col info">
				<view class="flex-row group_7">
					<view class="left-section"> </view>
					<text class="text_3">邮寄信息</text>
				</view>
				<view class="flex-row section_1">
					<image src="/static/point.png" class="image_5" />
					<text class="text_4">请把您的商品按照如下地址邮寄完成后,填入快递信息</text>
				</view>
				<view class="flex-col section_2">
					<view class="flex-row">
						<text class="text_5">收件人</text>
						<text class="text_6">{{config.receive_name}}</text>
					</view>
					<view class="flex-row group_9">
						<text class="text_7">联系电话</text>
						<text class="text_8">{{config.receive_phone}}</text>
					</view>
					<view class="flex-row group_10">
						<text class="text_9">收货地址</text>
						<text class="text_10">{{config.receive_add}}</text>
					</view>
				</view>
			</view>
			<!-- 物流信息结束 -->
			<!-- 填写信息开始 -->
			<view class="flex-col fill">
				<view class="flex-row group_11">
					<view class="left-section"> </view>
					<text class="text_11">填写信息</text>
				</view>
				<view style="width: 90%;margin: 30rpx;">
					<view class="items-center" style="justify-content: space-between;">
						<u-form-item :label-width="200" label="商品数量">
							<u-input v-model="form.number" placeholder="请输入商品数量" type="number" height="0" />
						</u-form-item>
						<view>瓶</view>
					</view>
					<u-form-item :label-width="200" label="物流公司">
						<u-input v-model="form.logistics_company" placeholder="请输入物流公司" height="0" />
					</u-form-item>
					<u-form-item :label-width="200" label="物流单号">
						<u-input v-model="form.logistics_no" placeholder="请输入物流单号" height="0" />
					</u-form-item>
					<view class="items-center" @click="open" style="justify-content: space-between;">
						<u-form-item :label-width="200" label="寄卖时长">
							<view style="color: #c0c4cc;" v-if="!form.time">请选择寄卖时长</view>
							<view style="color: #c0c4cc;" v-else>{{form.time}}</view>
						</u-form-item>
						<u-icon name="arrow-right" size="36" color="#666"></u-icon>
					</view>

				</view>
			</view>
			<!-- 填写信息结束 -->

		</view>
		
		<!-- 确认发货开始 -->
		<view class="order">
			<u-button @click="toPost()" :custom-style="customStyle1" shape="circle">确认发货</u-button>
		</view>
		<view class="flex-col explain">
			<text class="text_16">邮寄说明</text>
			<mp-html :content="tran.text"></mp-html>
		</view>
		<!-- 确认发货结束 -->
		<!-- 选择时间 -->
		<view class="H150" style="height: 150rpx;">
			
		</view>
		<u-picker mode="selector" v-model="show" :default-selector="[0]" :range="selector"
			@confirm="selectTime"></u-picker>
	</view>
</template>

<script>
	import {
		getSystem,
		sendDelivery,
		getTime
	} from '@/api/index.js'
	import {
		toast,
		toastC
	} from '../../utils/common'
	export default {
		data() {
			return {
				show: false,
				selector: [1, 2, 3],
				selectAr:[],
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				form: {
					logistics_company: '',
					logistics_no: '',
					number: "",
					time: ""
				},
				customStyle: {
					color: "#ffffff",
					backgroundColor: "#999999"
				},
				customStyle1: {
					color: "#ffffff",
					backgroundColor: '#00C785'
				},
				is_ok: 0,
				_id: '',
				adr_id: '',
				config: [],
				background: {
					backgroundColor: '#00C785',
				},
				orderId: "",
				tran: "",
				time: ""
			}
		},
		onLoad(res) {
			this.orderId = res.id
			let obj = {
				key: "receive"
			}
			getSystem(obj).then(res => {
				console.log(res);
				this.config = JSON.parse(res.data.value)
			})
			getSystem({
				key: 'tran'
			}).then(res => {
				console.log("邮寄说明", res);
				this.tran = res.data

			})
			getTime().then(res => {
				console.log("时间", res);
				this.selector = res.data.map(item => {
					return item.key + `(${item.commission}%)`
				})
				this.selectAr = res.data
			})

		},
		methods: {
			toPost() {
				let form = this.form;
				if (!form.number) {
					// vk.toast('请输入物流单号')
					toast("请输入数量")
					return;
				}
				if (!form.logistics_company) {
					// vk.toast('请输入物流公司')
					toast("请输入物流公司")
					return;
				}
				if (!form.logistics_no) {
					// vk.toast('请输入物流单号')
					toast("请输入物流单号")
					return;
				}
				
				if (!form.time) {
					// vk.toast('请输入物流单号')
					toast("请选择时间")
					return;
				}
				let obj = {
					oid: this.orderId,
					receive_name: this.config.receive_name,
					receive_phone: this.config.receive_phone,
					receive_add: this.config.receive_add,
					delivery_sn: this.form.logistics_no,
					delivery_name: this.form.logistics_company,
					goods_number: this.form.number,
					recovery_length: this.time,

				}
				sendDelivery(obj).then(res => {
					console.log(res);
					if (res.code == 200) {
						toastC("发货成功")
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 500)
					}else{
						toast("网络错误")
					}

				})
			},
			open() {
				console.log("hhh");
				this.show = true
			},
			selectTime(e) {
				console.log(e);
				this.form.time = this.selectAr[e[0]].key + `(${this.selectAr[e[0]].commission}%)`
				this.time = this.selectAr[e[0]].id
				console.log(this.time);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 750rpx;
		min-height: 100vh;
		box-sizing: border-box;
		
	}
	// 确认发货开始
	.order {
		padding: 20rpx 30rpx 15rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: rgb(255, 255, 255);
		box-shadow: 0px -4rpx 30rpx 0px rgba(0, 0, 0, 0.05);

		.button {
			margin-top: 20rpx;
			width: 92vw;
			height: 10.5vw;
		}

		.section_5 {
			margin: -5rpx -30rpx 0 0;
		}

		.group_25 {
			margin-left: 10rpx;
			line-height: 30rpx;
			white-space: nowrap;
			height: 30rpx;

			.text_29 {
				color: rgb(153, 153, 153);
				font-size: 22rpx;
				line-height: 30rpx;
			}

			.text_30 {
				color: rgb(0, 199, 133);
				font-size: 22rpx;
				line-height: 30rpx;
			}
		}
	}

	// 确认发货结束
	// 物流信息开始
	.info {
		padding-bottom: 30rpx;
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;

		.group_7 {
			padding: 30rpx 0 4rpx;
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.left-section {
				margin: 10rpx 0;
				background-color: rgb(0, 199, 133);
				border-radius: 0px 6rpx 6rpx 0px;
				width: 6rpx;
				height: 20rpx;
			}

			.text_3 {
				margin-left: 24rpx;
			}
		}

		.section_1 {
			margin-left: 30rpx;
			margin-right: 32rpx;
			padding: 11rpx 20rpx;
			color: rgb(194, 155, 123);
			font-size: 20rpx;
			line-height: 28rpx;
			white-space: nowrap;
			background-color: rgb(255, 249, 235);
			border-radius: 6rpx;

			.image_5 {
				margin: 4rpx 0;
				width: 20rpx;
				height: 20rpx;
			}

			.text_4 {
				margin-left: 10rpx;
				margin-right: 38rpx;
			}
		}

		.section_2 {
			margin: 10rpx 30rpx 0;
			padding: 30rpx 30rpx;
			background-color: rgb(247, 248, 250);
			border-radius: 10rpx;

			.group_9 {
				margin-top: 20rpx;

				.text_7 {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_8 {
					margin-left: 30rpx;
					color: rgb(34, 34, 34);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
				}
			}

			.group_10 {
				margin-top: 20rpx;

				.text_9 {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_10 {
					margin-left: 30rpx;
					margin-right: 19rpx;
					color: rgb(34, 34, 34);
					font-size: 28rpx;
					line-height: 40rpx;
					// white-space: nowrap;
				}
			}

			.text_5 {
				color: rgb(153, 153, 153);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;
			}

			.text_6 {
				margin-left: 58rpx;
				color: rgb(34, 34, 34);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;
			}
		}
	}

	// 物流信息结束

	// 填写信息开始
	.fill {
		margin-top: 30rpx;
		padding-top: 30rpx;
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;

		.group_11 {
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.left-section {
				margin: 10rpx 0;
				background-color: rgb(0, 199, 133);
				border-radius: 0px 6rpx 6rpx 0px;
				width: 6rpx;
				height: 20rpx;
			}

			.text_11 {
				margin-left: 24rpx;
			}
		}

		.group_12 {
			height: 30rpx;
			padding-left: 30rpx;
			padding-right: 28rpx;

			.text_12 {
				color: rgb(102, 102, 102);
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
			}

			.group_13 {
				color: rgb(153, 153, 153);
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;

				.image_6 {
					margin: 8rpx 0 6rpx 13rpx;
					width: 11rpx;
					height: 18rpx;
				}
			}
		}

		.divider {
			margin: 10rpx 32rpx 0 30rpx;
			background-color: rgb(238, 238, 238);
			height: 2rpx;
		}

		.group_14 {
			padding: 29rpx 30rpx 31rpx;

			.text_14 {
				color: rgb(102, 102, 102);
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
			}

			.text_15 {
				margin-right: 22rpx;
				color: rgb(153, 153, 153);
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
			}
		}
	}

	// 填写信息结束

	// 说明开始
	.explain {
		margin-top: 30rpx;
		padding-left: 30rpx;
		.text_16 {
			color: rgb(102, 102, 102);
			font-size: 24rpx;
			font-weight: 500;
			line-height: 33rpx;
			white-space: nowrap;
		}

		.text_17 {
			margin-top: 11rpx;
			color: rgb(153, 153, 153);
			font-size: 20rpx;
			line-height: 37rpx;
			text-align: left;
		}
	}

	// 说明结束
</style>